<template>
    <div>
        <pre v-note>
        自动安装
            在项目创建时选择 vuex 模块直接安装
        手动安装
            npm install vuex@版本  vue2^版本使用vuex@3.6.2  ， vue3^版本使用vuex@4^ => 建议使用Pinia
            项目src/store/index.js 中 构建vuex数据实例仓库
            <code>
                import Vue from 'vue'
                import Vuex from 'vuex'
                Vue.use(Vuex)
                const store = new Vuex.Store({
                    // state 是vuex独立管理的响应式数据仓库
                    state:{
                        msg:"vuex共享变量msg"
                    }
                })
                export default store;
            </code>
            在main.js中完成仓库装载
            <code>
                import Vue from 'vue'
                import store from '@/store'
                new Vue({
                    store,
                    render: h => h(App),
                }).$mount('#app')
            </code>
        </pre>
        <pre v-note>
        组件中使用
            <code>
                // 页面
                ＜p＞vuex.msg:｛｛ $store.state.msg ｝｝＜/p＞
                ＜p＞vuex.msg:｛｛ msg ｝｝＜/p＞
                ＜p＞vuex.user:｛｛ user ｝｝＜/p＞

                // 脚本
                import { mapState } from "vuex"; // 语法糖辅助函数

                export default {
                    // 自定义取值代码
                    // computed:{
                    //     msg(){
                    //         return this.$store.state.msg
                    //     }
                    // },

                    // 使用辅助函数
                    // computed: mapState(["msg","user"]),

                    // 使用辅助函数+es6对象展开符
                    computed: {
                        ...mapState(["msg","user"]),
                        
                    }
                }
            </code>
        </pre>
        <p>vuex.msg:{{ $store.state.msg }}</p>
        <p>vuex.msg:{{ msg }}</p>
        <!-- <p>vuex.msg:{{ info }}</p> -->
        <p>vuex.user( <input type="button" value="点击更新" @click="updateStu()"> ):{{ user }}</p>
        <input type="button" value="printStore()" @click="printStore()">
        <hr>
        <div class="child-box">
            <child-one class="item"></child-one>
            <child-two class="item"></child-two>
        </div>
    </div>
</template>

<script>
import ChildOne from '@/components/VuexComponent/ChildOne.vue'
import ChildTwo from '@/components/VuexComponent/ChildTwo.vue'

import { mapState,mapMutations } from "vuex";
// let a =  mapState(["msg","user"])
// console.log( a )
// console.log( a.msg )
export default {
    components:{
        ChildOne,ChildTwo
    },
    data() {
        return {
            // 使用仓库变量作为初始值为当前组件进行赋值
            // 该变量独立于仓库以外是组件的变量
            // 所以当前仓库变量更新时，该变量不发生变化
            // info:this.$store.state.msg
        }
    },
    // computed:{
    //     msg(){
    //         return this.$store.state.msg
    //     }
    // },
    // computed: mapState(["msg","user"]),
    computed: {
        ...mapState(["msg","user"]),
        username(){
            return "tom"
        }
    },
    methods:{
        ...mapMutations(["setUser"]),
        printStore(){
            console.log("this:",this)
            console.log("vuex $store:",this.$store)
        },
        // async updateStu(){
        //     try {
        //         let { data } = await this.$api.loadStuDetail("1111111111");
        //         // this.$store.commit("setUser",data)
        //         this.setUser(data);
        //     } catch (error) {
        //         console.log(error);
        //         this.$tip("数据加载失败")
        //     }
        // }
        updateStu(){
            this.$store.dispatch("initUser","1111111111")
        }
    }
}
</script>

<style scoped>
.child-box{
    display: flex;
    flex-flow: row nowrap;
    width: 100%;
}
.child-box .item{
    flex-grow: 1;
}
</style>